<template>
    <jw-Table :tableLoading="tableLoading" :tableData="tableData" align="center" :columns="columns">
        <!-- 头像显示     -->
        <template v-slot:imageUrl="{row}">
            <!-- <el-avatar shape="square" :src="row.imageUrl">
            </el-avatar> -->
            <img :src="row.imageUrl" width="100" alt="">
        </template>
        <template v-slot:action="{row}">
                <!-- 自定义图标 -->
                <el-button type="success" @click="goProOrder(row)">
                    <template #icon>
                        <i class="iconfont icon-vip3"></i>
                    </template>
                    <!-- 自定义语法 -->
                    <template #default>
                        点击充值
                    </template>
                </el-button>
        </template>
          
    </jw-Table>
</template>
<script setup>
import jwTable from "@/components/jwTable/index.vue"
import {ElMessageBox,ElMessage} from "element-plus"
//引入发起请求的方法
import * as api from "@/api/pay.js"
import {ref} from "vue"
import {useRouter} from "vue-router"
let router=useRouter()
//动态定义表头
let columns=[
    {
        label:"产品图片",
        prop:"imageUrl",

    },
    {
        label:"产品名称",
        prop:"productName"
    },
    {
        label:"产品描述",
        prop:"description"
    },
    {
        label:"产品价格",
        prop:"price"
    },
    {
        label:"库存",
        prop:"inventory"
    },
    {
        label:'充值',
        prop:'action'
    }
]
//声明一个数据，用于注入给表格
let tableData=ref([])
//声明控制加载动画的变量
let tableLoading=ref(false)
//获取产品
let getList=async()=>{
    tableLoading.value=true
    try{
        
        let res=await api.getCategoryApi()
        tableData.value=res.data.data.reverse()
        tableLoading.value=false
    }catch(e){
        tableLoading.value=false
    }
}
getList()
//跳转到下单页面
let goProOrder=(row)=>{
   //使用弹框提示用户，是否购买
   ElMessageBox.confirm('您正在购买 '+row.productName+', 是否继续?','购买提示',{
         confirmButtonText:'确定',
         cancelButtonText:'取消',
         type:'warning'
   })
       .then(()=>{
           //2.用户点击了确认
           //直接获取当前产品的id，传递给下一个页面，然后跳转到预支付页面
           router.push({path:"/preOrder",query:{product_id:row.product_id}})
        })
       .catch(()=>{
          ElMessage({
            type:'warning',
            message:'已取消购买'
          })
       })
}
// goPreOrder()

</script>
<script>
export default{
    meta:{
        title: 'vipCharge',
         name: 'vip充值',
         routeName:"vipCharge",
         icon:"icon-chongzhi"
    }
}
</script>